<!--
 用户下拉框组件
 -->
<template>
  <el-select
    v-model="userId"
    :placeholder="placeholder"
    :loading="loading"
    :remote="remote"
    :multiple="multiple"
    :reserve-keyword="reserveKeyword"
    :disabled="disabled"
    :remote-method="getUser"
    @change="onChange"
    filterable
    style="width: 100%"
  >
    <el-option
      v-for="item in user"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
      <span style="float: left">{{ item.label }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{
        item.nickName
      }}</span>
    </el-option>
  </el-select>
</template>

<script>
import { listUser as getUserList } from "@/api/system/user";

export default {
  name: "userSelect",
  data() {
    return {
      loading: false,
      user: [],
    };
  },
  props: {
    selectType: { type: String, default: "deptId" }, //deptId 或 userName
    userId: { type: String, default: undefined },
    userName: { type: String, default: undefined },
    deptId: { type: String, default: undefined },
    placeholder: { type: String, default: "请选择用户" },
    remote: { type: Boolean, default: false },//是否为远程搜索
    reserveKeyword: { type: Boolean, default: false },//多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
    disabled: { type: Boolean, default: false },
    multiple: {type: Boolean,default: false},//多选
  },
  watch: {
    deptId(val) {
      this.getUser(val);
    },
    userName(val) {
      if (this.user.length === 0) {
        this.getUser(val);
      }
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      if (this.selectType === "deptId") {
        this.getUser(this.deptcode);
      } else {
        this.getUser(this.userName);
      }
    },
    //查询用户
    getUser(val) {
      this.user = [];
      if (val == null || val === "") {
        return;
      }
      let query = { current: 1, size: 10000 };
      if (this.selectType === "deptId") {
        query.deptId = val;
      } else {
        query.nickName = val;
      }
      this.loading = true;
      getUserList(query).then((response) => {
        this.loading = false;
        if (response.rows.length !== 0) {
          response.rows.forEach((a) => {
            if (a.status === "0") {
              this.user.push({
                value: a.userId,
                label: a.nickName,
                nickName: a.userName,
              });
            }
          });
        }
      });
    },
    //选中
    onChange(val) {
      this.$emit("upData", val);
    },
  },
};
</script>

<style scoped>
</style>
